<template>
		<div class="order-container">
			<div class="order-rabs">
				<v-tab v-model="active" :tabs="tabs" @change="handleSwitch" :scroll="false">
				</v-tab>
			</div>
				<div class="tabs-panel">
					<div v-if="orderList.length" class="order-card-list">
						<cuCard
							v-for="order in orderList"
							:key="order.id"
							:type="order.type"
							:weight="order.weight"
							:status="order.status"
							:id="order.id"
							:address="order.address"
							:remark="order.remark"
							:createTime="order.createTime"
							@cancel="handleCancel"
						/>
						<p class="loading-text">
							{{loadingType === 0 ? loadingStatus.conuentDown: loadingType === 1 ? loadingStatus.contentFresh : loadingStatus.contentNoMore }}
						</p>
					</div>
					<div v-else class="empty-row">
						<Empty />
					</div>
				</div>
		</div>
</template>

<script>
// import msTabs from '@/components/ms-tabs/ms-tabs.vue';
import cuCard from '@/components/cu-card/cu-card.vue';
import Empty from '@/components/empty/empty.vue';
import vTab from '@/components/v-tabs/v-tabs.vue'
export default {
	components: {
		// msTabs,
		cuCard,
		Empty,
		'v-tab': vTab
	},
	onReady() {
		// 进入页面请求数据
	},
	data() {
		return {
			active: 0,
			tabs: ['待处理', '进行中', '已完成'],
			loadingStatus: {
				conuentDown: '上拉显示更多',
				contentFresh: '正在加载···',
				contentNoMore: '没有更多数据了'
			},
			loadingType: 0,
			orderList: [
				{
					id: '0',
					createTime: '1594969434274',
					type: 1,
					weight: 2,
					address: '北京市海淀区学院路街道30号',
					remark: '东西比较沉，一个人可能拿不到',
					status: 1
				},
				{
					id: '1',
					createTime: '1594969434274',
					type: 1,
					weight: 2,
					address: '北京市海淀区学院路街道30号',
					remark: '东西比较沉，一个人可能拿不到',
					status: 1
				},
				{
					id: '2',
					createTime: '1594969434274',
					type: 1,
					weight: 2,
					address: '北京市海淀区学院路街道30号',
					remark: '东西比较沉，一个人可能拿不到',
					status: 1
				},
				{
					id: '3',
					createTime: '1594969434274',
					type: 1,
					weight: 2,
					address: '北京市海淀区学院路街道30号',
					remark: '东西比较沉，一个人可能拿不到',
					status: 1
				},
				{
					id: '4',
					createTime: '1594969434274',
					type: 1,
					weight: 2,
					address: '北京市海淀区学院路街道30号',
					remark: '东西比较沉，一个人可能拿不到',
					status: 1
				}
			],
			pageSize: 10,
			pageNum: 1,
			error: false,
			loading: false,
			loadingText: '上拉加载更多',
			total: 0
		};
	},
	onReady() {
		// this.getOrderList('PUSH')
	},
	// 下拉刷新
	onPullDownRefresh() {
		// this.pageNum = 1
		// this.orderList = []
		// this.getOrderList()
	},
	// 上拉加载
	onReachBottom() {
		// console.log('上拉加载')
		this.getOrderList('PUSH')
	},
	methods: {
		// 切换列表
		handleSwitch() {
			console.log(this.active);
		},
		// 取消订单
		handleCancel(id) {
			const self = this
			uni.showLoading()
			this.$request.order.removeOrder({id})
				.then(res => {
					uni.hideLoading()
					uni.showToast({
						title: '订单已取消',
						icon: 'none'
					})
					const oldList = [...self.orderList]
					this.orderList = oldList.filter(item => item.id !== id)
				})
				.catch(() => {
					uni.hideLoading()
				})
		},
		// 获取订单列表
		getOrderList(type) {
			let status = Number(this.active) + 1;
			const { pageNum, pageSize } = this;
			this.loading = true;
			this.loadingType = 2
			this.$request.order
				.queryOrderList({
					page: pageNum + 1,
					size: pageSize,
					status
				})
				.then(res => {
					this.loading = false;
					if (res.status === 200) {
						this.total = res.data.total;
						if (type === 'PUSH') {
							if (this.orderList.length >= this.total) {
								this.loadingType = 3
							}
							this.orderList = [...this.orderList, ...res.data.list];
						} else {
							this.loadingType = 1
							this.orderList = res.data.list;
						}
					} else {
						uni.showToast({
							title: res.message,
							icon: 'none'
						});
					}
				})
				.catch(() => {
					this.error = true;
					this.loading = false;
				});
		},
		
	}
};
</script>

<style lang="scss">
	@import "~@/uni.scss";
.order-container {
	.order-rabs {
		width: 100%;
	}
	.tabs-panel {
		padding: 50rpx 20rpx 20rpx;
		background: $cu-bg;
		min-height: calc(100vh - 146rpx);
	}
	.loading-text {
		text-align: center;
		color: $uni-font-size-subtitle;
	}
}
</style>
